<template>
    <!-- 卡片包裹表格，带有表头 -->
    <el-card style="max-width: 100%" shadow="hover">
        <template #header>
            <div class="card-header">
                <span>表名1</span>
            </div>
        </template>
        <!-- 数据表格 -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="列1" show-overflow-tooltip />
            <el-table-column prop="name" label="列2" show-overflow-tooltip />
            <el-table-column prop="address" label="列3" show-overflow-tooltip />
        </el-table>
    </el-card>
</template>

<script setup>
// 引入 Element Plus 组件
import { ElCard, ElTable, ElTableColumn } from 'element-plus'
// 引入 vue 响应式
import { ref } from 'vue'

// 表格数据
const tableData = ref([
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    }
])
</script>